import React, { Component } from 'react'
import { Form, Icon, Input, Button } from 'antd'
import { base } from '../router'
import { config } from '../config'
import '../sass/login.sass'

class Login extends Component {
  // 确认登录
  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // console.log(values)
        // 登录接口模块
        // this.$http
        //   .post('/user/admin/login', values)
        //   .then(res => {
        //     let data = { name: values.userAccount }
        //     sessionStorage.setItem('userInfo', JSON.stringify(data))
        //     sessionStorage.setItem('auth', JSON.stringify(res.token))
        //     this.props.history.push(`${base}admin/home-index`)
        //   })
        this.props.history.push(`${base}admin/home-index`) // 开发时跳过登录验证
      }
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <h1>后台登录</h1>
        <Form.Item>
          {getFieldDecorator('userAccount', {
            rules: [
              { required: true, message: '请输入用户名!' },
              { max: 40, message: '用户名不能超过40个字符!' }
            ]
          })(<Input prefix={<Icon type="user" />} placeholder="用户名" />)}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('userPws', {
            rules: [
              { required: true, message: '请输入密码!' },
              { max: 50, message: '密码不能超过50个字符!' }
            ]
          })(
            <Input
              prefix={<Icon type="lock" />}
              type="password"
              placeholder="密码"
            />
          )}
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
          <p className="copy">
            CopyRight &copy; 科匠 &nbsp;&nbsp; Version: {config.version}
          </p>
        </Form.Item>
      </Form>
    )
  }
}

export default Form.create()(Login)
